<template>
 <div class="nav">
  <div class="avatar">
   <el-avatar :size="60" :src="$store.getters.getInfo.image === null ? circleUrl : $store.getters.getInfo.image" @error="errorHandler">
    <img :src="circleUrl" alt="" />
   </el-avatar>

   <p>{{ $store.getters.getInfo.nickName }}</p>

   <a @click="certification">Not Verified</a>
  </div>

  <el-menu :default-active="active" router class="el-menu-vertical-demo" background-color="#F5FAFF" text-color="#a1a5b3" active-text-color="#000">
   <el-menu-item v-for="(item, index) of slider" :index="item.path" :key="index">
    <i :class="item.icon"></i>
    <span slot="title">{{ item.name }}</span>
   </el-menu-item>
  </el-menu>
 </div>
</template>

<script>
export default {
 name: "Nav",
 data: () => ({
  circleUrl: require('@/assets/avatar.png'),

  active: null,

  slider: [
   {
    icon: 'el-icon-notebook-1',
    name: '',
    path: '/Assets'
   },
   {
    icon: 'el-icon-receiving',
    name: '',
    path: '/Withdrawal'
   },
   {
    icon: 'el-icon-notebook-2',
    name: '',
    path: '/Products'
   },
   /*{
    icon: 'el-icon-office-building',
    name: '',
    path: '/Certification'
   },*/
   {
    icon: 'el-icon-setting',
    name: '',
    path: '/Settings'
   }
  ]
 }),
 created() {
  this.active = this.$route.path

  this.onChange()
 },
 methods: {
  // 头像加载失败
  errorHandler() {
   return true
  },

  // 跳转认证
  certification() {
   this.$router.push({
    path: '/Certification'
   })
  },

  // 翻译导航栏语言
  onChange () {
   const lang = [this.$t('user.common.nav1'), this.$t('user.common.nav2'), this.$t('user.common.nav3'), this.$t('user.common.nav5')];
   this.slider.forEach((item, index) => {
    item.name = lang[index]
   })
  }
 },
 watch: {
  '$route'(a, b) {
   this.active = a.path
  },
  '$i18n.locale' (a,b){
   this.onChange()
  }
 }
}
</script>

<style scoped lang="scss">
.nav {
 display: flex;
 flex-direction: column;
 padding-right: 0;
 width: 260px;
 margin: 0;
 padding-left: 0;
 background-color: #F5FAFF;
 max-width: 100%;

 .avatar {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 4px solid #fff;

  .el-avatar {
   background: rgba(0,0,0,0.05);
  }

  p {
   padding: 10px 0;
   display: block;
   font-size: 14px;
   color: #002445;
  }

  a {
   background: #bab9b9 url('../../../assets/security.png') no-repeat 10px;
   background-size: 12px;
   color: white;
   border-radius: 100px;
   padding: 4px 10px 4px 25px;
   font-size: 12px;
   text-align: left;
   -webkit-transform: scale(0.9);
   transform: scale(0.9);
   display: flex;
   align-items: center;
  }
 }

 .el-menu {
  border: none;
  padding-top: 20px;

  /deep/ .el-menu-item {
   padding: 15px 15px 15px 30px;
   margin-bottom: 15px;
   height: auto;
   display: flex;
   align-items: center;
   white-space: normal;
   line-height: 20px;

   i {
    margin-right: 10px;
    font-size: 24px;
   }

   span {
    width: 1%;
    flex: 1 1 auto;
   }

   &:hover {
    background-color: transparent !important;

    i, span {
     color: #000 !important;
    }
   }
  }
 }
}
</style>
